<template>
  <el-table :data="orders" border stripe v-loading="loading">
    <el-table-column prop="order_id" label="订单号" width="120" />
    <el-table-column prop="room_name" label="会议室" width="180" />
    <el-table-column prop="start_time" label="开始时间" width="180">
      <template #default="{ row }">
        {{ new Date(row.start_time).toLocaleString() }}
      </template>
    </el-table-column>
    <el-table-column prop="end_time" label="结束时间" width="180">
      <template #default="{ row }">
        {{ new Date(row.end_time).toLocaleString() }}
      </template>
    </el-table-column>
    <el-table-column prop="total_price" label="总价(元)" width="120" />
    <el-table-column prop="order_status" label="状态" width="120">
      <template #default="{ row }">
        <el-tag :type="getStatusType(row.order_status)">
          {{ getStatusName(row.order_status) }}
        </el-tag>
      </template>
    </el-table-column>
    <el-table-column prop="refund_status" label="退款状态" width="120" v-if="showRefundStatus">
      <template #default="{ row }">
        <el-tag v-if="row.refund_status" :type="getRefundStatusType(row.refund_status)">
          {{ getRefundStatusName(row.refund_status) }}
        </el-tag>
      </template>
    </el-table-column>
    <el-table-column label="操作" width="200">
      <template #default="{ row }">
        <el-button
          v-if="row.order_status === 'unpaid'"
          type="primary"
          size="small"
          @click="$emit('pay', row.order_id)"
        >
          支付
        </el-button>
        <el-button
          v-if="row.order_status === 'unpaid' || row.order_status === 'paid'"
          type="danger"
          size="small"
          @click="$emit('cancel', row.order_id)"
        >
          取消
        </el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script setup>
defineProps({
  orders: {
    type: Array,
    default: () => []
  },
  loading: {
    type: Boolean,
    default: false
  },
  showRefundStatus: {
    type: Boolean,
    default: false
  }
})

defineEmits(['pay', 'cancel'])

const statusNames = {
  unpaid: '未支付',
  paid: '已支付',
  canceled: '已取消',
  used: '已完成'
}

const statusTypes = {
  unpaid: 'warning',
  paid: 'success',
  canceled: 'danger',
  used: 'info'
}

const refundStatusNames = {
  pending: '处理中',
  approved: '已退款',
  rejected: '已拒绝'
}

const refundStatusTypes = {
  pending: 'info',
  approved: 'success',
  rejected: 'danger'
}

const getStatusName = (status) => {
  return statusNames[status] || status
}

const getStatusType = (status) => {
  return statusTypes[status] || ''
}

const getRefundStatusName = (status) => {
  return refundStatusNames[status] || status
}

const getRefundStatusType = (status) => {
  return refundStatusTypes[status] || ''
}
</script>